<template>
    <portlet name="产品使用记录">
        <div class="search_header">
            <i-form :model="formItem" :label-width="80">
                <Row>
                    <i-col span='8'>
                        <Form-item label="公司名称">
                            <i-select :model.sync="formItem.companyCode" placeholder="选择公司">
                                <i-option :value="">全部</i-option>
                                <i-option  v-for="i in allClient" :value="i.company_no">{{i.company_name}}</i-option>
                            </i-select>
                        </Form-item>
                    </i-col>
                    <i-col span='8'>
                        <Form-item label="产品名称">
                            <i-select :model.sync="formItem.productCode" placeholder="选择产品">    
                                <i-option :value="">全部</i-option>
                                <i-option  v-for="i in allPro" :value="i.product_code">{{i.product_name}}</i-option>
                            </i-select>
                        </Form-item>
                    </i-col>
                    <i-col span='8'>
                        <Form-item label="交易状态">
                            <i-select :model.sync="formItem.transState" placeholder="选择状态">
                                <i-option value="SUCCESS">交易成功</i-option>
                                <i-option value="FAILED">交易失败</i-option>
                            </i-select>
                        </Form-item>
                    </i-col>
                </Row>
                <Row>
                    <i-col span='16'>
                        <Form-item label="交易时间">
                            <Row>
                                <i-col span="11">
                                    <Date-picker @on-change='changeStartDate' type="date" placeholder="开始日期" :value.sync="formItem.startDate"></Date-picker>
                                </i-col>
                                <i-col span="2" style="text-align: center">-</i-col>
                                <i-col span="11">
                                    <Date-picker @on-change='changeEndDate' type="date" placeholder="结束时间" :value.sync="formItem.endDate"></Date-picker>
                                </i-col>
                            </Row>
                        </Form-item>
                    </i-col>
                    <i-col span='2'>
                        <Form-item>
                            <i-button @click='searchData' type="primary">查询</i-button>
                        </Form-item>
                    </i-col>
                </Row>
            </i-form>
        </div>
        <div class="search_content">
            <i-table :columns="columns1" :data="data2"></i-table>
        </div>
        <div class="search_footer">
            <span><Page @on-change='changePage' :total='pageInfor.records' :page-size='pageInfor.rows' :current='pageInfor.page' show-elevator show-sizer></Page></span>
        </div>
    </portlet>
</template>
<script>
    import Portlet from '../../components/portlet.vue';
    export default {
        components:{ Portlet },
        data () {
            return {
                formItem: {
                    productCode: '',
                    transState: '',
                    startDate: '',
                    endDate: '',
                    companyCode:'',
                },
                allPro:this.store.allPro,
                allClient:this.store.allClient,
                day:{
                    startDateD:'',
                    endDateD:''
                },
                pageInfor:{
                    page:1,
                    rows:10,
                    records:1,
                },
                columns1: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '产品名称',
                        key: 'productName'
                    },
                    {
                        title: '产品编码',
                        key: 'productCode'
                    },
                    {
                        title: '交易日期',
                        key: 'date'
                    },

                    {
                        title: '交易状态',
                        key: 'transState'
                    },
                ],
                data1: [
                ]
            }
        },
        computed:{
            data2(){
                return this.data1.map(function(data){
                    let newd=data;
                    let temd=new Date(data.transDate.time);
                    newd.date=temd.toLocaleString();
                    return newd;
                });
            },
            // formatDate(){
            //     console.log(this.formItem.startDate.getYear())
            //     let a=this.formItem.startDate;
            //     let b=this.formItem.endDate;
            //     return {
            //         startDateF:a,
            //         endDateF:b
            //     }
            // }
        },
        methods: {
            changePage(a){
                this.pageInfor.page=a;
                this.getData();
            },
            changeStartDate(a){
                this.day.startDateD=a.toString();
            },
            changeEndDate(a){
                this.day.endDateD=a.toString();
            },
            searchData(){
                this.getData();
            },
            getData(){
                this.$http.jsonp(this.path+'consump/consumpServlet/queryCompany',{
                    params:{page:this.pageInfor.page,
                            rows:this.pageInfor.rows,
                            companyCode:this.formItem.companyCode,
                            transState:this.formItem.transState,
                            productCode:this.formItem.productCode,
                            endDate:this.day.endDateD,
                            startDate:this.day.startDateD},
                    jsonp:'callback'
                }).then(
                    (datas)=>{
                        if(datas.body.code=='001'){
                            this.pageInfor.page=parseInt(datas.body.result.page);
                            this.pageInfor.records=datas.body.result.records;
                            this.data1=datas.body.result.rows;
                        }else if(datas.body.code=='002'){
                            this.$Message.success('提交信息出错p!');
                        }else if(datas.body.code=='997'||datas.body.code=='998'){
                            this.store.state.user.companyId=null;
                            this.store.state.user.companyName=null;
                            this.store.state.allInfor=null;
                            this.$Message.error('登陆超时或未登陆,请登陆!');
                            this.myRouter.go({path:'/login'});
                        }
                    },
                    (error)=>{
                        console.log(error)
                        this.$Message.success('网络问题!');
                    }
                );
            }
        },

        ready(){
            this.$nextTick(()=>{
                this.getData();
         })
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/scss">
    @import '../../styles/query.scss';
</style>